<template>
 <div class="wrapper-jsc">
    <div class="date-box">
      <el-form :inline="true" :model="listQuery"> 
       <el-form-item label="年">
          <el-date-picker
            v-model="listQuery.year"
           type="year"
            value-format="yyyy"
            placeholder="选择年"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="month-jsc" label="月份">
          <el-select filterable
            v-model="listQuery.month"
            placeholder="月"
            @change="fetchData()"
          >
            <el-option label="全部" value="0"></el-option>
            <el-option label="1月" value="1"></el-option>
            <el-option label="2月" value="2"></el-option>
            <el-option label="3月" value="3"></el-option>
            <el-option label="4月" value="4"></el-option>
            <el-option label="5月" value="5"></el-option>
            <el-option label="6月" value="6"></el-option>
            <el-option label="7月" value="7"></el-option>
            <el-option label="8月" value="8"></el-option>
            <el-option label="9月" value="9"></el-option>
            <el-option label="10月" value="10"></el-option>
            <el-option label="11月" value="11"></el-option>
            <el-option label="12月" value="12"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" >
      <el-tab-pane label="产能数据" name="first">
        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
         <div class="chart-wrapper">
         <line-chart ref='lineCha' :listQuery='this.listQuery' />
        </div>

        
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="库存情况" name="second">
        
    <el-table border :data="list" style="width: 100%;padding-top: 15px;">

    <el-table-column label="战区" >
      <template slot-scope="{row}">
        {{ row.provinceName   }}
      </template>
    </el-table-column>
    <el-table-column label="未启动" align="center">
      <template slot-scope="{row}">
        {{ row.a }}
      </template>
    </el-table-column>
    <el-table-column label="沟通中" align="center">
      <template slot-scope="{row}">
         {{ row.b }}
      </template>
    </el-table-column>
        <el-table-column label="待拍摄"  align="center">
      <template slot-scope="{row}">
        {{ row.c }}
      </template>
    </el-table-column>
        <el-table-column label="拍摄中"  align="center">
      <template slot-scope="{row}">
         {{ row.d }}
      </template>
    </el-table-column>
        <el-table-column label="待制作"  align="center">
      <template slot-scope="{row}">
        {{ row.e }}
      </template>
    </el-table-column>
       <el-table-column label="制作中"  align="center">
      <template slot-scope="{row}">
        {{ row.f }}
      </template>
    </el-table-column>
       <el-table-column label="待回款"  align="center">
      <template slot-scope="{row}">
       {{ row.g }}
      </template>
    </el-table-column>
       <el-table-column label="库存汇总"  align="center">
      <template slot-scope="{row}">
        {{ row.totalCount }}
      </template>
    </el-table-column>
  </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getCourseCapacity } from "@/api/region_jsc";

import LineChart from "./components/LineChart";
export default {
  data() {
    return {
      activeName:'first',
     listQuery: {
        year: "2020",
        month: "0",
      },
       list: [], 
    };
  },
  components: {
    LineChart,
 
  },
  created() {
    this.fetchData();
  },
 methods: {
     
  
    fetchData() {
      getCourseCapacity(this.listQuery).then((response) => {
        this.list = response.data.data
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.zq-box{
    margin-top: 24px;;
    margin-bottom: 24px;
}

</style>
